<template>
	<view class="columnbox wdh-100 content">
		<view class="columnbox wdh-100 search-box">
			<view class="rowbox search-info spb">
				<view class="rowbox">
					<u-icon name="search" size="40rpx"></u-icon>
					<input v-model="name" placeholder="请输入搜索内容" />
				</view>
				<view class="rowbox search-btn" @click="searchInfo">搜索</view>
			</view>
			<view class="rowbox wdh-100 jus">
				<view @click="setType(index)" :class="{'sel-type':curtype==index}" class="one-type"
					v-for="(item,index) in typeList" :key='index'>{{item.name}}</view>
			</view>
		</view>
		<view style="width: 100%;height: 220rpx;"></view>
		<!-- <view @click="chooseItem(item)" class="rowbox spb one-info" v-for="(item,index) in infoList" :key='index'> -->
		<view @click="chooseUse(item)" class="rowbox spb one-info als" v-for="(item,index) in infoList" :key='index'>
			<image :src="item.image.split(',')[0]" mode="aspectFill" class="m-img"></image>
			<view class="columnbox als m-detail">
				<view class="m-name wdh-100 textovflow">{{item.name}}</view>
				<view class="m-desc">{{item.changjia}}</view>
				<view class="m-desc">{{item.guige}}</view>
				<view class="rowbox wdh-100 spb">
					<view class="rowbox">
						<view class="price-info">¥{{item.price.toFixed(2)}}</view>
						<!-- <view class="stock">库存89</view> -->
					</view>
					<view class="rowbox">
						<view style="margin-right: 20rpx;" @click.stop="addMedicine(item)"
							class="rowbox def-bgcol one-btn" v-if="item.changyong==1">
							+常用药
						</view>
						<view class="rowbox def-bgcol one-btn">+处方笺</view>
					</view>
				</view>
			</view>
		</view>
		<view style="width: 100%;background: #fff;padding-top: 20vh;" class="rowbox">
			<u-empty v-if="totalCount==0" text="暂无信息" icon-size="70px"></u-empty>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				typeList: [{
						name: '常用药'
					}, {
						name: '历史开药'
					},
					{
						name: '西药'
					},
					{
						name: '本科室'
					}
				],
				curtype: 0,
				infoList: [],
				name: '',
				searchflag: false,
				totalCount: 0,
				submitflag: false,
				pageNo: 1
			};
		},
		onLoad() {
			this.getList()
		},
		onShow() {

		},
		onReachBottom() {
			if (this.infoList.length < this.totalCount) {
				this.pageNo++
				this.getList()
			}
		},
		methods: {
			addMedicine(v) {
				if (!this.submitflag) {
					this.submitflag = true
					uni.showLoading({
						title: '加载中'
					})
					this.$req.post('/doctor/medicinechangyong', {
						doctorid: uni.getStorageSync('uid'),
						medicineid: v.id
					}).then(res => {
						v.changyong = 2
						this.submitflag = false
						uni.hideLoading()
					})
				}
			},
			chooseItem(v) {
				let pages = getCurrentPages(); //获取所有页面栈实例列表
				let nowPage = pages[pages.length - 1]; //当前页页面实例
				let prevPage = pages[pages.length - 2]; //上一页页面实例
				prevPage.$vm.infoList.push(v)
				uni.navigateBack()
			},
			chooseUse(v, index) {
				let info = {
					image: v.image.split(',')[0],
					name: v.name,
					changjia: v.changjia,
					guige: v.guige,
					price: v.price,
					allnum: v.allnum,
					yongfa: v.yongfa,
					pinci: v.pinci,
					yongliang: v.yongliang,
					ylunit: v.ylunit,
					kynuit: v.kynuit,
					id: v.id
				}
				console.log(info)
				uni.redirectTo({
					url: './useType?info=' + JSON.stringify(info) + '&index=' + index
				})
			},
			setType(v) {
				this.curtype = v
				this.pageNo = 1
				this.infoList = []
				this.getList()
			},
			searchInfo() {
				this.searchflag = true
				this.pageNo = 1
				this.infoList = []
				this.getList()
			},
			getList() {
				this.$req.post('/doctor/medicines', {
					pageNo: this.pageNo,
					pageSize: 10,
					state: this.curtype * 1 + 1,
					name: this.searchflag ? this.name : '',
					id: 1,
					doctorid: uni.getStorageSync('uid')
				}).then(res => {
					this.totalCount = res.data.data.totalCount
					this.infoList = this.infoList.concat(res.data.data.data)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background: #F5F8FB;
		font-family: PingFang SC;
	}

	.search-box {
		position: fixed;
		top: var(--window-top);
		left: 0;
		padding: 32rpx 36rpx;
		background: #fff;
		z-index: 9;

		.search-info {
			width: 100%;
			height: 70rpx;
			border: #00b6b2 solid 1px;
			border-radius: 100rpx;
			padding-left: 20rpx;

			input {
				font-size: 26rpx;
				margin-left: 10rpx;
			}
		}

		.search-btn {
			width: 110rpx;
			height: 50rpx;
			background: linear-gradient(to right, #01a7a1, #5acbc1);
			border-radius: 100rpx;
			font-size: 26rpx;
			color: #fff;
			margin-right: 10rpx;
		}
	}

	.one-type {
		margin-top: 40rpx;
		display: inline-block;
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #202020;
		margin-right: 26rpx;
	}

	.sel-type {
		color: #00b6b2;
	}

	.one-info {
		background: #fff;
		width: 100%;
		padding: 32rpx 32rpx;
		border-bottom: #F5F8FB solid 1px;

		.m-img {
			width: 150rpx;
			height: 150rpx;
			border-radius: 10rpx;
		}

		.m-detail {
			width: calc(100% - 170rpx);
			margin-left: 20rpx;
			// height: 150rpx;
			justify-content: space-between;
		}

		.m-name {
			font-size: 32rpx;
			font-weight: bold;
		}

		.m-desc {
			font-size: 24rpx;
			color: #7c7d7d;
			line-height: 40rpx;
		}

		.price-info {
			font-size: 32rpx;
			color: #fc2c21;
			font-weight: bold;
		}

		.stock {
			color: #7c7d7d;
			font-size: 24rpx;
			margin-left: 20rpx;
		}

		.one-btn {
			font-size: 24rpx;
			color: #fff;
			padding: 10rpx 20rpx;
			border-radius: 10rpx;
			line-height: 40rpx;
		}
	}
</style>